<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>用户材料</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            table-layout: fixed;
        }

        .page {
            margin: 0 auto;
            display: flex;
        }

        .showPaper {
            width: 21cm;
            padding: 0.445cm 0.5cm;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.15)
        }

        @page {
            size: A4;
        }

        @media print {
            .page {
                border: initial;
                border-radius: initial;
                width: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always;
            }
        }

        .title {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
        }

        .sourceTitle {
            font-size: 16px;
            line-height: 32px;
            font-weight: bold;
            margin: 12px 0 6px;
            padding: 0;
        }

        .bline {
            border-bottom: #cccccc 1px solid;
            padding: 3px 4px;
            color: black;
            font-family: Microsoft YaHei, serif;
            font-weight: normal;
        }

        .p-item {
            float: left;
            width: 50%;
        }

        .p-item h4 {
            float: left;
            margin-top: 10px;
        }

        .p-item img {
            width: 95%;
            float: left;
            border: 1px #dadef6 dotted;
            padding: 0.2cm;
            height: 7.2cm;
        }
    </style>
</head>
<body>
<!---->
<div class="book" id="book">
    <div class="page" th:classappend="${!pdfPrint?'showPaper':''}">
        <div th:if="${idCard == null}" class="subpage" style="width: 100%">
            该司机未提交认证资料
        </div>
        <div th:if="${idCard != null}" class="subpage" style="width: 100%">
            <div class="title"><span th:text="${idCard.platName}">贵州极舜货运有限公司</span>：司机证件存档资料</div>
            <div style="width:100%;border-bottom:#dadef6 1px dotted;margin-top: 16px;margin-bottom: 8px"></div>
            <div>
                <div class="p-item">
                    <h4 class="sourceTitle">用户姓名：<span class="bline" th:text="${idCard.name}"></span></h4>
                </div>
                <div class="p-item">
                    <h4 class="sourceTitle">身份证件号：<span class="bline" th:text="${idCard.idCardNo}"></span></h4>
                </div>
                <div class="p-item" th:if="${drivingLicense != null}">
                    <h4 class="sourceTitle">准驾车型：<span class="bline" th:text="${drivingLicense.drivingLicenseType}"></span></h4>
                </div>
                <div class="p-item" th:if="${qualificationCert != null}">
                    <h4 class="sourceTitle">从业类别：<span class="bline" th:text="${qualificationCert.qualificationCategories}"></span></h4>
                </div>
            </div>
            <div th:if="${idCard!=null}">
                <div class="p-item">
                    <h4 class="sourceTitle">身份证人像面：</h4>
                    <img th:src="${idCard.idCardFrontImg}">
                </div>
                <div class="p-item">
                    <h4 class="sourceTitle">身份证国徽面：</h4>
                    <img th:src="${idCard.idCardBackImg}">
                </div>
            </div>
            <div th:if="${drivingLicense!=null}">
                <div class="p-item">
                    <h4 class="sourceTitle">驾驶证：</h4>
                    <img th:src="${drivingLicense.drivingLicenseImg}">
                </div>
            </div>
            <div th:if="${qualificationCert!=null}">
                <div class="p-item">
                    <h4 class="sourceTitle">从业资格证：</h4>
                    <img th:src="${qualificationCert.qualificationPhotoImg}">
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>